<template>
    <h1>APP 组件</h1>
    <hr />
    <h1>原价：{{ price }} <button @click="price = 500">修改原价</button></h1>
    <h1>会员价：{{ vipPrice }} </h1>
    
</template>

<script setup>
import { ref, watch, watchEffect } from 'vue'

const price = ref(1000)
const vipPrice = ref(0)

//当前侦听器会自动追踪内部书写的响应式数据(不包含赋值号左边)，并且页面打开后会立即执行
watchEffect(() => {
    vipPrice.value = price.value / 2
})

//侦听price响应式对象，会在页面一打开的时候和price发生变化的时候执行
// watch(price, 
// () => {
//     console.log("当前侦听器会在 price/appName 的值发生变化的时候执行");
//     vipPrice.value = price.value / 2
// }, 
// {
//     immediate: true
// })

</script>

<style>

</style>
